<template>
    <view class="Bar">
        <view class="zhan" :style="{height:barHeight + 'px'}"></view>
        <view class="my-navBar"  :style="{top:barHeight + 'px'}">
            <view class="title">{{title}}</view>
            <image :src="icon" @tap="goPage('myMessage')"></image>
        </view>
    </view>

</template>

<script>
    export default{
        name:'m-userBar',
        props:{
            title:{
                type:String,
                default:""
            },
            icon:{
                type:String,
                default:""
            }
        },
        data(){
            return{
                barHeight:getApp().globalData.mediaStatus
            }
        },
        methods:{
            goPage(name){
                let param={
                    name:"yejianglin",
                    age:"22"
                }
                this.$router.push({
                    route:this.$routesConfig[name],
                    query:param
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .Bar{
        .zhan{
            left: 0;
            right: 0;
            background-color: #ffffff;
            z-index: 1;
        }
        .my-navBar{
            position: fixed;
            left: 0;
            right: 0;
            height: 44px;
            background-color: #ffffff;
            z-index: 1;
            .title{
                font-size: 14px;
                color: #333333;
                line-height: 44px;
                text-align: center;
            }
            image{
                display: block;
                width: 23px;
                height:18px;
                position: absolute;
                top: 50%;
                left: 22px;
                transform: translate(0,-50%);
            }
        }
    }

</style>
